<template>
    用户管理 <el-button type="primary" style="margin-left: 1150px;">搜索</el-button> <el-button type="danger"
        plain>重置</el-button>
    <hr style="color: beige">
    ID &nbsp;&nbsp;&nbsp;<el-input v-model="input" style="width: 200px"
        placeholder="请输入用户ID" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    昵称 &nbsp;&nbsp;&nbsp;<el-input v-model="input" style="width: 200px"
        placeholder="请输入昵称" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    账号 &nbsp;&nbsp;&nbsp;<el-input v-model="input" style="width: 200px" placeholder="请输入账号" />


    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="100" />
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="name" label="昵称" width="150" />
        <el-table-column prop="user" label="账号" width="150" />
        <el-table-column prop="role" label="角色" width="150" />
        <el-table-column prop="email" label="邮箱" width="180" />
        <el-table-column prop="ip" label="登录IP" width="180" />
        <el-table-column prop="login_time" label="最近登录时间" width="180" />
        <el-table-column prop="caozuo" label="操作" width="240">
            <!-- 插槽 -->
            <template #default="scope">
                <span style="color: blue;">编辑</span><span style="color: red;">删除</span>
            </template>

        </el-table-column>

    </el-table>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const id = ref('')
const name = ref('')
const user = ref('')
const role = ref('')
const login_time = ref('')
const email = ref('')


function getdata(){
    axios.get('http://127.0.0.1:8000/usermanage/')
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })


}

const message = ref('Hello, Vue 3!');
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>

import 'echarts';
import ECharts from 'vue-echarts';
